<template>
  <div>
    <SearchBar :options="options" @change="searchChange" />
    <div class="flex-row-center mt20">
      <div>
        <span class="fs-base fc-secondary mr5">待付</span>
        <el-text type="danger" size="large">￥9398.00</el-text>
      </div>
    </div>
    <el-table :data="list" :loading="loading" class="mt20">
      <el-table-column label="费用名称" prop="name"></el-table-column>
      <el-table-column label="业主" prop="chamberOwnerName"></el-table-column>
      <el-table-column label="联系方式" prop="chamberOwnerMobile"></el-table-column>
      <el-table-column label="房间" prop="chamberFullName"></el-table-column>
      <el-table-column label="分组" prop="grouphName"></el-table-column>
      <el-table-column label="操作人" prop="creatorName"></el-table-column>
      <el-table-column label="金额" prop="money"></el-table-column>
      <el-table-column label="待付日期" prop="payDate"></el-table-column>
      <el-table-column label="状态" prop="status"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button link type="primary" @click="handlePayment">付款</el-button>
          <el-button link type="primary" @click="handleRemove(row)">删除账单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <CollectionDl type="payment" ref="collectionDlRef" @ok="handelCollectionOk" />
    <BillRemoveDl :visible="removeBillVisible" :info="currentBill" @cancel="handleRemoveBillCancel" @ok="handleRemoveBillOk" />
  </div>
</template>
<script setup name="PaymentPane">
import SearchBar from '../component/searchBar.vue'
import CollectionDl from '@/components/CollectionDl/index.vue'
import BillRemoveDl from '@/components/BillRemoveDl/index.vue'
import billApi from '@/api/room/bill'

const { proxy } = getCurrentInstance()

const options = ref({
  group: true,
  status: true,
  searchStr: true,
  date: true
})
const list = ref([])
const loading = ref(false)
const total = ref(0)
const removeBillVisible = ref(false)
const currentBill = ref({})

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
})
const { queryParams } = toRefs(data)

/* 搜索栏变化 */
function searchChange(form) {
  queryParams.value = { ...form, ...queryParams.value }
  getList()
}

/* 打开收款弹窗 */
function handlePayment() {
  proxy.$refs['collectionDlRef'].show()
}
function handelCollectionOk(value) {
  console.log(value)
  proxy.$refs['collectionDlRef'].close()
}


/* 删除账单 */
function handleRemove(row) {
  currentBill.value = { ...row }
  removeBillVisible.value = true
}
function handleRemoveBillCancel() {
  currentBill.value = {}
  removeBillVisible.value = false
}
function handleRemoveBillOk() {
  billApi.remove(billId).then(() => {
    proxy.$modal.msgSuccess("账单删除成功");
    removeBillVisible.value = false
    getList()
  })
}

function getList() {
  loading.value = true
  billApi.getList({
    status: '1'
  }).then(res => {
    list.value = res.rows
    total.value = res.total
  }).finally(() => {
    loading.value = false
  })
}
getList()
</script>
